<template>
  <div id="conentpage" class="rightBodyContent">
    <div class="rightBodyContent-in">
      <el-button type="primary" plain @click="backlist" size="small" v-if="editId"><i class="el-icon-back"></i>返回列表
      </el-button>
      <el-row class="warp">
        <el-col :span="20" class="warp-main" v-if="editBody">
          <el-form label-width="100px">
            <el-form-item label="问卷标题:" prop="title">
              <p>{{editBody.title}}</p>
            </el-form-item>
            <el-form-item label="问卷描述:">
              <p v-html="editBody.description"></p>
            </el-form-item>
            <el-form-item label="问卷时间:" prop="end_time">
              <p>{{editBody.start_time}} 至 {{editBody.end_time}}</p>
            </el-form-item>
            <el-form-item label="问卷状态:" prop="end_time">
              <span v-if="editBody.status==0" class="c-danger">未提交</span>
              <span v-if="editBody.status==1" class="c-success">已提交</span>
              <span v-if="editBody.status==2" class="c-danger">已过期</span>
            </el-form-item>
            <el-form-item label="问卷内容:">
              <div class="iconlist" v-if="editBody.status==0">
                <div class="bodycontent pd10">
                  <div class="mylist mb-30" v-for="(item,index) in orderList">
                    <p class="mylist-title">
                      <span>{{index+1}}.</span>{{item.content}}{{item.type==1?'（单选）':''}}{{item.type==2?'（多选）':''}}
                    </p>
                    <div class="list-content" v-if="item.type==3">
                      <el-input v-model="item.option[0].word" placeholder="填写问题内容" class="mylist-content-line-textarea"
                                type="textarea"></el-input>
                    </div>
                    <div class="mylist-content" v-else>
                      <div class="mylist-content-line" v-for="(items,indexs) in item.option">
                        <p @click="checkicon(index,indexs)">
                          <span class="mylist-content-line-icon">
                            <i class="iconfont iconcheck"
                               :class="items.checked?'icondagou':'iconxuanzhongyuandian'"></i>
                          </span>
                          <span class="mylist-content-line-text">{{items.index}}. {{items.text}}</span>
                        </p>
                        <input type="text" class="mylist-content-line-input w-140 ml-10" v-if="items.type==1"
                               v-model="items.word" placeholder="其他内容">
                        <!--<el-input v-model="items.word" placeholder="其他内容" class="mylist-content-line-input w-140 ml-10" v-if="items.type==1" type="text" @input="inputFn"></el-input>-->
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div v-else>
                <div class="bodycontent pd10">
                  <div v-for="(items,index) in listCheck">
                    <p class="mylist-title">
                      {{index+1}}. {{items.content}}{{items.type==1?'（单选）':''}}{{items.type==2?'（多选）':''}}{{items.type==3?'（用户自行输入）':''}}
                    </p>
                    <div v-if="items.type!==3">
                      <div v-for="(line,indexs) in items.option" class="inlinebox">
                        <p>{{line.index}}.{{line.text}}<span v-if="line.type==1">(可输入自定义文字)</span>
                        </p>
                      </div>
                      <div class="userAnser" v-if="editBody.status==1">
                        <span>你的答案（{{items.answer.option}}:{{items.answer.content}}）</span>
                      </div>
                    </div>
                    <div v-else>
                      <div class="inlinebox" v-if="editBody.status!==1">
                        用户自行输入
                      </div>
                      <div v-else class="userAnser">
                        <span>你的答案（{{items.answer.option}}:{{items.answer.content}}）</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit" v-if="editBody.status==0" size="small">确认提交</el-button>
              <el-button @click="backlist" v-else size="small">返回</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import {pagination} from '@/utils/util.js'

  export default {
    data () {
      return {
        page: {
          pageindex: pagination.pageIndex,
          pagesize: pagination.pageSize,
          total: pagination.total
        },
        qustionCheck: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'],
        tableStripe: true, // 是否斑马栏
        tableBorder: true, // 单元格右边边框
        dialogTableVisible: false,
        arryList: null,
        editId: this.$route.query.editId,
        listCheck: [],
        teachertype: 0,
        dynamicTags: [],
        dynamicTagsId: [],
        dynamicTagsArray: {},
        editBody: null,
        orderList: null,
        flag: true
      }
    },
    watch: {
      '$route' (to, from) {
        // 这样就可以获取到变化的参数了，然后执行参数变化后相应的逻辑就行了
        console.log('路由参数变化', this.$route.query, this.$route.query.editId, !this.$route.query.editId)
        if (!this.$route.query.editId) {
          this.editId = ''
        }
      }
    },
    created () {

    },
    mounted () {
      this.Inint()
    },
    methods: {
      Inint () {
        this.$fetch(this.api.questionnaire_inside_mydetail, {id: this.editId}).then((response) => {
          if (response.code === 0) {
            this.listCheck = response.list
            for (let i in response.list) {
              if (response.list[i].type !== 3) {
                for (let j in response.list[i].option) {
                  response.list[i].option[j]['checked'] = false
                  if (response.list[i].option[j].type == 1) {
                    response.list[i].option[j]['word'] = ''
                  }
                }
              } else {
                response.list[i].option.push({word: ''})
              }
            }
            console.log('response.list:', response.list)
            response.vo.start_time = response.vo.start_time.split(' ')[0]
            response.vo.end_time = response.vo.end_time.split(' ')[0]
            this.orderList = response.list
            this.editBody = response.vo
            // this.detailCheckFn()
          } else {
          }
        }).catch((err) => {
          console.log(err)
        })
      },
      detailCheckFn () {
        console.log('listCheck', this.listCheck)
        for (let i in this.listCheck) {
          let option = this.listCheck[i]
          this.$fetch(api.questionnaire_option, {id: this.listCheck[i].id}).then((response) => {
            if (response.code === 0) {
              for (let j in response.list) {
                option.option[j].number = response.list[j].number
              }
              this.$set(this.listCheck, i, option)
            } else {
            }
          }).catch((err) => {
            console.log(err)
          })
        }
      },
      backlist () {
        this.$router.go(-1)
      },
      onSubmit () {
        let this_ = this
        // id 	字符串 	必填 	1 	- 	问卷id
        // name 	字符串 	必填 	1 	- 	签名
        // option 	字符串 	必填 	1 	- 	选项json
        let data_ = {}
        data_.id = this.editId

        let option_ = []
        let option_check = []
        // id 1 option a,b contnet 选项1,选项2
        for (let i in this.orderList) {
          let obj_ = {}
          obj_.id = this.orderList[i].id
          let option = ''
          let content = ''
          if (this.orderList[i].type !== 3) {
            for (let j in this.orderList[i].option) {
              if (this.orderList[i].option[j].checked) {
                if (!option) {
                  option += this.orderList[i].option[j].index
                } else {
                  option += ',' + this.orderList[i].option[j].index
                }
                // 1 带输入框 2 否
                if (!content) {
                  if (this.orderList[i].option[j].type == 1) {
                    content += this.orderList[i].option[j].word
                  } else {
                    content += this.orderList[i].option[j].text
                  }
                } else {
                  if (this.orderList[i].option[j].type == 1) {
                    content += ',' + this.orderList[i].option[j].word
                  } else {
                    content += ',' + this.orderList[i].option[j].text
                  }
                }
                obj_.option = option
                obj_.content = content
              }
            }
          } else {
            obj_.option = 'A' // 空
            obj_.content = this.orderList[i].option[0].word
          }
          option_.push(obj_)
          obj_.type = this.orderList[i].type
          option_check.push(obj_)
        }

        let status = true
        for (let i in option_check) {
          if ((option_check[i].type === 1 || option_check[i].type === 2) && !option_check[i].option) {
            status = false
          }
          if (option_check[i].type === 3 && !option_check[i].content) {
            status = false
          }
        }
        if (!status) {
          console.log('请回答问卷内容')
          return
        }
        data_.option = JSON.stringify(option_)
        // console.log('最后的信息内容', data_)
        // console.log('最后的信息内容123', this.orderList)
        if (this.flag) {
          this.flag = false
          this.$post(this.api.questionnaire_inside_writeadd, data_).then((response) => {
            // console.log(response)
            if (response.code === 0) {
              for (let i in this.orderList) {
                if (this.orderList[i].type !== 3) {
                  for (let j in this.orderList[i].option) {
                    this.orderList[i].option[j]['checked'] = false
                    if (this.orderList[i].option[j].type == 1) {
                      this.orderList[i].option[j]['word'] = ''
                    }
                  }
                } else {
                  this.orderList[i].option[0].word = ''
                }
              }
              this.Inint()
              setTimeout(() => {
                this_.flag = true
              }, 500)
            } else {
              console.log('请求失败')
              this.flag = true
            }
          }).catch((err) => {
            console.log(err)
          })
        }
      },
      checkicon (index, indexs) {
        // 1 单选项; 2 多选项; 3 输入框
        let indexList = this.orderList[index]
        if (indexList.type == 1) {
          for (let i in indexList.option) {
            indexList.option[i].checked = false
          }
          indexList.option[indexs].checked = !this.orderList[index].option[indexs].checked
        } else if (this.orderList[index].type == 2) {
          indexList.option[indexs].checked = !this.orderList[index].option[indexs].checked
        }
        this.$set(this.orderList, index, indexList)
      }
    }
  }
</script>

